/* 全局样式文件 */
@use './variables.scss' as *;

/* 重置样式 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
  font-size: $font-size-base;
  color: $text-primary;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

a {
  color: $primary-color;
  text-decoration: none;
  
  &:hover, &:focus {
    color: $primary-color;
    filter: brightness(110%);
  }
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  
  &:hover {
    background-color: rgba(0, 0, 0, 0.3);
  }
}

::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.05);
}

/* 常用工具类 */
.clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

.pull-left {
  float: left;
}

.pull-right {
  float: right;
}

/* 过渡效果 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity $transition-duration $transition-timing-function;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

/* 页面容器 */
.app-container {
  padding: 20px;
}

/* 卡片样式 */
.app-card {
  background-color: #fff;
  border-radius: $border-radius-base;
  box-shadow: $box-shadow-light;
  padding: 20px;
  margin-bottom: 20px;
}